<template>
  <div class="settings-container">
    <h1 class="settings-title">系统设置</h1>

    <el-tabs v-model="activeTab" class="settings-tabs">
      <el-tab-pane label="用户管理" name="users">
        <div class="tab-content">
          <div class="section">
            <h3 class="section-title">用户列表</h3>
            <div class="user-list">
              <div class="user-card" v-for="user in users" :key="user.id">
                <el-avatar :size="48" :src="user.avatar" class="user-avatar">{{ user.name.charAt(0) }}</el-avatar>
                <div class="user-info">
                  <div class="user-name">{{ user.name }}</div>
                  <div class="user-role">{{ user.role }}</div>
                </div>
                <div class="user-actions">
                  <el-button type="text" icon="el-icon-edit">编辑</el-button>
                  <el-button type="text" icon="el-icon-delete" style="color: #F56C6C;">删除</el-button>
                </div>
              </div>
            </div>
          </div>

          <div class="section">
            <h3 class="section-title">添加新用户</h3>
            <el-form :model="newUser" label-width="80px" class="user-form">
              <el-form-item label="用户名">
                <el-input v-model="newUser.name" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="newUser.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="角色">
                <el-select v-model="newUser.role" placeholder="请选择角色">
                  <el-option label="管理员" value="admin"></el-option>
                  <el-option label="编辑" value="editor"></el-option>
                  <el-option label="查看者" value="viewer"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addUser">添加用户</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="系统配置" name="system">
        <div class="tab-content">
          <div class="section">
            <h3 class="section-title">基本设置</h3>
            <el-form :model="systemSettings" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="systemSettings.name"></el-input>
              </el-form-item>
              <el-form-item label="系统主题">
                <el-radio-group v-model="systemSettings.theme">
                  <el-radio label="light">浅色主题</el-radio>
                  <el-radio label="dark">深色主题</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="自动保存">
                <el-switch v-model="systemSettings.autoSave"></el-switch>
              </el-form-item>
              <el-form-item label="保存间隔">
                <el-input-number
                    v-model="systemSettings.saveInterval"
                    :min="1"
                    :max="60"
                    :disabled="!systemSettings.autoSave"
                ></el-input-number> 分钟
              </el-form-item>
            </el-form>
          </div>

          <div class="section">
            <h3 class="section-title">通知设置</h3>
            <el-form :model="notificationSettings" label-width="120px">
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationSettings.email"></el-switch>
              </el-form-item>
              <el-form-item label="系统通知">
                <el-switch v-model="notificationSettings.system"></el-switch>
              </el-form-item>
              <el-form-item label="重要通知">
                <el-switch v-model="notificationSettings.important"></el-switch>
              </el-form-item>
              <el-form-item label="通知时间">
                <el-time-select
                    v-model="notificationSettings.time"
                    :picker-options="{
                    start: '08:00',
                    step: '00:15',
                    end: '18:00'
                  }"
                    placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="安全设置" name="security">
        <div class="tab-content">
          <div class="section">
            <h3 class="section-title">密码策略</h3>
            <el-form label-width="180px">
              <el-form-item label="密码最小长度">
                <el-input-number v-model="securitySettings.minPasswordLength" :min="6" :max="20"></el-input-number>
              </el-form-item>
              <el-form-item label="密码有效期">
                <el-input-number v-model="securitySettings.passwordExpiry" :min="30" :max="365"></el-input-number> 天
              </el-form-item>
              <el-form-item label="强制复杂密码">
                <el-switch v-model="securitySettings.complexPassword"></el-switch>
              </el-form-item>
              <el-form-item label="密码历史记录">
                <el-input-number v-model="securitySettings.passwordHistory" :min="0" :max="10"></el-input-number> 个
              </el-form-item>
            </el-form>
          </div>

          <div class="section">
            <h3 class="section-title">双重认证</h3>
            <div class="two-factor">
              <div class="two-factor-info">
                <el-tag type="success" v-if="securitySettings.twoFactorEnabled">已启用</el-tag>
                <el-tag type="danger" v-else>未启用</el-tag>
                <p v-if="securitySettings.twoFactorEnabled" style="margin-top: 8px;">
                  双重认证已启用，您的账户安全性更高
                </p>
                <p v-else style="margin-top: 8px; color: #F56C6C;">
                  建议启用双重认证以提高账户安全性
                </p>
              </div>
              <div class="two-factor-actions">
                <el-button
                    type="primary"
                    v-if="!securitySettings.twoFactorEnabled"
                    @click="enableTwoFactor"
                >
                  启用双重认证
                </el-button>
                <el-button
                    type="danger"
                    v-else
                    @click="disableTwoFactor"
                >
                  禁用双重认证
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="settings-footer">
      <el-button type="primary" @click="saveSettings">保存设置</el-button>
      <el-button @click="resetSettings">恢复默认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const activeTab = ref('users');

// 用户管理数据
const users = ref([
  { id: 1, name: '管理员', email: 'admin@example.com', role: '管理员', avatar: '' },
  { id: 2, name: '张编辑', email: 'editor@example.com', role: '编辑', avatar: '' },
  { id: 3, name: '李查看', email: 'viewer@example.com', role: '查看者', avatar: '' }
]);

const newUser = reactive({
  name: '',
  email: '',
  role: ''
});

// 系统配置数据
const systemSettings = reactive({
  name: '业务分析系统',
  theme: 'light',
  autoSave: true,
  saveInterval: 5
});

// 通知设置数据
const notificationSettings = reactive({
  email: true,
  system: true,
  important: true,
  time: '10:00'
});

// 安全设置数据
const securitySettings = reactive({
  minPasswordLength: 8,
  passwordExpiry: 90,
  complexPassword: true,
  passwordHistory: 3,
  twoFactorEnabled: false
});

// 方法
const addUser = () => {
  if (newUser.name && newUser.email && newUser.role) {
    users.value.push({
      id: users.value.length + 1,
      name: newUser.name,
      email: newUser.email,
      role: newUser.role,
      avatar: ''
    });
    newUser.name = '';
    newUser.email = '';
    newUser.role = '';
  }
};

const enableTwoFactor = () => {
  securitySettings.twoFactorEnabled = true;
};

const disableTwoFactor = () => {
  securitySettings.twoFactorEnabled = false;
};

const saveSettings = () => {
  console.log('保存设置');
  // 实际应用中这里会发送API请求
};

const resetSettings = () => {
  console.log('恢复默认设置');
  // 重置所有设置到默认值
};
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}

.settings-tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.tab-content {
  padding: 16px 0;
}

.section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 18px;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fafafa;
}

.user-avatar {
  margin-right: 16px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.user-role {
  font-size: 14px;
  color: #909399;
}

.user-actions {
  display: flex;
  gap: 8px;
}

.user-form {
  max-width: 500px;
}

.two-factor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fafafa;
}

.settings-footer {
  margin-top: 24px;
  text-align: right;
  padding: 16px 0;
  border-top: 1px solid #ebeef5;
}
</style>